<html>
  <head>
    <title>deck.gl + Mapbox Integration</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src="https://unpkg.com/deck.gl@^6.2.0/deckgl.min.js"></script>
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
    <link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css">
  </head>
  <body>
    <div id="map" style="width: 100vw; height: 100vh"></div>
  </body>
  <script type="text/javascript">
    const {MapboxLayer, ScatterplotLayer} = deck;

    // Get a mapbox API access token
    mapboxgl.accessToken = 'pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2pudzRtaWloMDAzcTN2bzN1aXdxZHB5bSJ9.2bkj3IiRC8wj3jLThvDGdA';

    // Initialize mapbox map
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v9',
      center: [-74.50, 40],
      zoom: 9
    });

    // Create a mapbox-compatible deck.gl layer
    const myDeckLayer = new MapboxLayer({
      id: 'my-scatterplot',
      type: ScatterplotLayer,
      data: [
        {position: [-74.5, 40], size: 10000}
      ],
      getPosition: d => d.position,
      getRadius: d => d.size,
      getColor: [255, 0, 0]
    });

    // Insert the layer before mapbox labels
    map.on('load', () => {
      map.addLayer(myDeckLayer, 'waterway-label');
    });
  </script>
</html>